<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>萌宠服务</title>
    <link rel="stylesheet" href="css/header.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/footer.css" media="screen" title="no title" charset="utf-8">
    <style media="screen">
    * {
      margin: 0px;
      padding: 0px;
    }
    .header{
      border-bottom: none;
      margin-bottom: 0;
    }
      .content{
        /*margin-top: 50px;*/
        width: 100%;
        height: 800px;
        background: url(source/serveimg/background.jpg);
        background-size: cover;
      }
      .top{
        width: 1200px;
        margin: auto;
        padding: 50px;
      }
      #address{
        width: 230px;
        height: 50px;
        background: white;
        display: inline-block;
      }
      #triangle{
        display: inline-block;
        width: 0px;
        height: 0px;
        border: 10px solid transparent;
        border-top:10px solid black;
        position: relative;
        top: 10px;
        left: -10px;
      }
      #citytext {
        height: 30px;
        width: 100px;
        text-align: center;
        font-size: 18px;
        border: none;
        background: transparent;
      }
      #searchbox{
        margin-left: 15px;
        padding: 0px 10px;
        width: 500px;
        height: 50px;
        background: white;
        display: inline-block;
      }
      #searchKeywords{
        width: 450px;
        height: 40px;
        background: rgb(238, 238, 238);
        margin-top: 5px;
        border: none;
        text-indent: 5px;
        font-size: 16px;
      }
      .citybox{
        position: absolute;
        width: 440px;
        height: 150px;
        background: white;
        border: 2px solid gray;
        display: none;
        z-index: 10;
      }
      .citybox li{
        display: inline-block;
        font-size: 16px;
        margin:0px 20px;
        margin-top: 30px;
      }
      .city{
        text-decoration: none;
        font-size: 16px;
        color:black;
      }
      .mapbox{
        width: 1200px;
        margin: auto;
        display: none;
      }
      #resultbox{
        width:280px;
        background: white;
        padding: 10px;
        height: 430px;
        float: left;
        overflow: scroll;
      }
      #result{
        width: 270px;
        height: 410px;
      }
      #allmap{
        width: 900px;
        height: 450px;
      }
    </style>
  </head>
  <body>
    <div class="header">
        <div class="head">
            <ul class="firstHead">
                <li><a href="index.html" target="_blank">波奇首页</a></li>
                <li><a href="shop.html" target="_blank">波奇商城</a></li>
                <li><a href="serve.html" target="_blank">波奇服务</a></li>
                <li><a href="message.html" target="_blank">波奇论坛</a></li>
                <li><a href="cyclopedia.html" target="_blank">宠物百科</a></li>
            </ul>
            <ul class="attention">
                <li><a href="#">关注我们<span><img src="" alt="" /></span></a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#"><span><img src="" alt="" /></span>收藏</a></li>
            </ul>
            <ul class="register">
                <li><a href="login.html" target="_blank">登陆</a></li>
                <li><a href="script:;">|</a></li>
                <li><a href="register.html" target="_blank">免费注册</a></li>
            </ul>
            <ul class="userLogin">
                <li>
                    <a href="script:;" id="userName"></a>
                </li>
                <li>|</li>
                <li><a href="script:;" id="quit">退出</a></li>
            </ul>

        </div>
    </div>
    <div class="content">
      <div class="top">
        <div class="guider" id="guider">
          <div class="white" style="color:white;font-size:16px;margin-bottom:15px;">萌宠网</div>
          <div class="white" style="color:white;font-size:50px;margin-bottom:30px;">萌宠服务</div>
          <div class="white" style="color:white;font-size:18px;margin-bottom:40px;">宠物洗澡、造型、寄养、医疗、绝育、摄影……&nbsp;这里都能搞定！</div>
        </div>
        <div  id="address">
          <img src="source/serveimg/location.png" valign="middle" alt="" />
          <span style="font-size:18px;line-height:50px;">所在地：</span>
          <div style="display:inline-block;height:30px;background:rgb(238,238,238)" valign="middle">
            <input type="text" name="name" id="citytext" value="西安">
            <a href="javascript:;" id="triangle"></a>
          </div>
          <div class="citybox">
            <ul class="checkcity">
              <li>
                <a href="#" class="city">上海</a>
              </li>
              <li>
                <a href="#" class="city">北京</a>
              </li>
              <li>
                <a href="#" class="city">杭州</a>
              </li>
              <li>
                <a href="#" class="city">南京</a>
              </li>
              <li>
                <a href="#" class="city">天津</a>
              </li>
              <li>
                <a href="#" class="city">广州</a>
              </li>
              <li>
                <a href="#" class="city">深圳</a>
              </li>
            </ul>
          </div>
        </div>


        <div id="searchbox">
          <input type="text" id="searchKeywords" value="" placeholder="宠物所在小区、街道、地标名、商圈名……"  autocomplete="off">
            <a href="javascript:;"id="search" style = "margin-top:5px;display:inline-block;vertical-align:top">
              <img src="source/serveimg/search.png" width = "40" alt="" />
            </a>
        </div>
      </div>
      <div class="mapbox">
        <div id="resultbox">
          <p style="width:100%;height:30px;font-size:16px;line-height:30px;color:gray;">为您搜索到以下结果：</p>
          <div id="result"></div>
        </div>
        <div id="allmap"></div>
      </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href="#">关于我们</a></li>|
            <li><a href="#">友情链接</a></li>|
            <li><a href="#">诚聘英才</a></li>|
            <li><a href="#">联系我们</a></li>|
            <li><a href="#">网站地图</a></li>|
            <li><a href="#">意见反馈</a></li>|
            <li><a href="#">帮助中心</a></li>|
            <li><a href="#">客服热线：123456789</a></li>
        </ul>
        <p>
            Copyright © 2007-2016 Boqii.com All Rights Reserved 光橙（上海）信息科技有限公司 版权所有 沪ICP备13034501号-2 增值电信业务经营许可证：沪B2-20140120
        </p>
    </div>
  </body>
</html>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4ilCdjYrWLtqW5TjGnI3sTkCYOVSKtM3"></script>
<script type="text/javascript">
  var triangle = document.getElementById("triangle");
  var citybox = document.getElementsByClassName("citybox")[0];
  triangle.onclick = function () {
      citybox.style.display=(citybox.style.display == "block"?"none":"block");
    triangle.style.borderTop = (triangle.style.borderTop == "10px solid red"?"10px solid black":"10px solid red");
  }
  var citytext = document.getElementById("citytext");
  var city = document.getElementsByClassName("city");
  for (var i = 0; i < city.length; i++) {
    city[i].onclick = function () {

      citytext.value = event.target.innerHTML;
      citybox.style.display = "none";
      triangle.style.borderTop = "10px solid black";
    }
  }



  // 百度地图API功能
  var map = new BMap.Map("allmap");            // 创建Map实例
  // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
  	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.centerAndZoom("西安",15);         // 设置地图显示的城市 此项是必须设置的
  	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
  var local = new BMap.LocalSearch(map, {
    renderOptions:{map: map, autoViewport:true},
    renderOptions: {map: map, panel: "result"}
  });

  // 覆盖区域图层测试
  	map.addTileLayer(new BMap.PanoramaCoverageLayer());
  var stCtrl = new BMap.PanoramaControl(); //构造全景控件
	stCtrl.setOffset(new BMap.Size(20, 40));
	map.addControl(stCtrl);//添加全景控件
  var size = new BMap.Size(10, 20);

  map.addControl(new BMap.CityListControl({
      anchor: BMAP_ANCHOR_TOP_LEFT,
      offset: size,
      // 切换城市之间事件
      // onChangeBefore: function(){
      //    alert('before');
      // },
      // 切换城市之后事件
      // onChangeAfter:function(){
      //   alert('after');
      // }
  }));

  var search = document.getElementById("search");
  var mapbox = document.getElementsByClassName("mapbox")[0];
  search.onclick=function () {
    var searchKeywords = document.getElementById("searchKeywords").value;
    if (!searchKeywords) {
      searchKeywords = "宠物";
    }
    mapbox.style.display = "block";
    local.searchNearby(searchKeywords,citytext.value);

  }


</script>
